<!--深度-->
<template>
  <div class="vt-order">

    <!--记录标题-->
    <div class="order-head">

      <div class="row acenter" @click="refreshClick(true)">
        <text class="font32 text2">{{T('当前委托')}}</text>
        <LImage class="img-refresh" :src="Config.img('v2_shuaxin.png')"></LImage>
      </div>
      
      <div class="row acenter" @click="allClick">
        <text class="font24 text2">{{T('全部')}}</text>
        <LImage class="img-arrow-right" :src="Config.img('v2_gengduo.png')"></LImage>
      </div>
    </div>
    <div class="order-line bg3"></div>


    <template v-for="(item, index) in datas">
      
      <VTOrderCell v-if="item.baseCoin" :key="index"
      :item="item" :isContract="isContract" @cancel="cancelClick(item, index)" />
      
      <div v-else class="order-genduo" :key="index">
        <text class="font22 text2">{{T('没有更多数据')}}</text>
      </div>
    </template>

    <!--无委托-->
    <div v-if="!datas.length" class="order-kong bg1">
      <LImage class="img-kong" :src="Config.img('list_empty.png')"></LImage>
      <text class="font28 text2">{{T('暂无委托~')}}</text>
    </div>
  </div>
</template>


<script>
import jconfig from "@/_js/config"
import jmodal from "@/_js/modal"
import jtime from "@/_js/time"
import jnavigator from "@/_js/navigator"
import jhttps from "@/_js/https"

import jtrading from "./trading"

const weexFunction = weex.requireModule("WeexFunction")
const WeexTrading = weex.requireModule("WeexTrading")

import I18N from "@/_i18n/i18n";
var T = I18N.t;

import VTOrderCell from './VTOrderCell.vue'
export default {
  components: {
    VTOrderCell
  },

  props:{
    api: Object, //api
    pair: Object, //交易对
    isContract: {
      type: Boolean,
      default:true
    }
  },

  watch: {
    api(val, oldVal) {
      if (val.apiId != oldVal.apiId) {
        jtrading.delectApiRsaStr(this.isContract);
        this.refresh(false);
        val.apiId ? this.addTime() : this.delectTime();
      }
    }
  },

  data() {
    return {
      T:T,
      Config:jconfig,
      
      timeHandler:undefined,
      datas: [],
      length: -1,
    };
  },

  mounted() {
    this.viewappear();
  },
  
  methods: {
    
    /************************************************* 通信*/
    //完全显示
    viewappear() {
      this.api.apiId && this.addTime();
      this.refresh(false);
    },

    //完全隐藏
    viewdisappear() {
      this.delectTime();
    },

    //刷新列表
    refresh(load) {
      if (!this.api.apiId) {
        this.length = -1;
        this.datas = [];
        return;
      };

      load && jmodal.showLoad();
      jtrading.gtApiRsaStr(this.api, this.isContract, load, (rsa)=>{
        this.httpsQueryOrderList(load, rsa);
      });
    },

    /********************************************** 其他*/
    //订单改变
    change(datas) {
      
      if (this.length != -1 && this.length != datas.length) {
        WeexTrading.apiChange(this.api.apiId, '', '0');
      }
      this.length = datas.length;
      
      //更新持仓冻结
      if (this.isContract) {
        var dongJied = {};
        datas.forEach((item)=>{
          if (item.offset==0) {
            var key = item.counterCoin + item.side;
            dongJied[key] = item.amount;
          }
        });
        this.$emit('change', dongJied);
      }
    },

    //删除定时器
    delectTime() {
      if(this.timeHandler){
        clearTimeout(this.timeHandler);
      }
    },
    
    //10秒刷新一次列表
    addTime(){
      if(this.timeHandler){
        clearTimeout(this.timeHandler);
      }

      this.timeHandler = setTimeout(() => {
        this.refresh(false);
      }, 10000);
    },

    /******************************** https */
    //https查询下单列表
    httpsQueryOrderList(load, rsa){

      var param = {'type':'limit',
                  'apiData':rsa,
                  'exchangeName':this.api.exchangeName,
                  'counterCoin':this.pair.counterCoin,
                  'baseCoin':this.pair.baseCoin};
      jhttps.post("manual/queryNoDealOrderList",param,true,(data)=>{

          if (data.status == 11505) { //服务器公钥过期
            jtrading.delectApiRsaStr(this.isContract);
            jtrading.gtApiRsaStr(this.api, this.isContract, load, (newrsa)=>{
              this.httpsQueryOrderList(load, newrsa);
            });
            return;
          }

          load && jmodal.hideLoad();
          if(data.status == 200){

            var datas = data.data.noDealOrderList;
            this.change(datas); 

            datas.forEach((item)=>{
              item.createTimeStr = jtime.getTime(item.createTime, 'M/d H:m');
            });
            datas.length && datas.push({});
            this.datas = datas;
          } else {
            load && jmodal.toast(data.msg);
          }
          this.addTime();
      });
    },

    //https撤单
    httpsCancelOrder(item, index, rsa){

      var param = {'orderId':item.orderId,
                    'type':item.type,
                    'apiData':rsa,
                    'exchangeName':this.api.exchangeName,
                    'counterCoin':this.pair.counterCoin,
                    'baseCoin':this.pair.baseCoin,};
      jhttps.postX("manual/cancelOrder",param,true,(data)=>{

        if (data.status == 11505) { //服务器公钥过期
          jtrading.delectApiRsaStr(this.isContract);
          jtrading.gtApiRsaStr(this.api, this.isContract, true, (newrsa)=>{
            this.httpsCancelOrder(item, index, newrsa);
          });
          return;
        }

        jmodal.hideLoad();
        if(data.status == 200){
          jmodal.toast(T('撤单成功'));
          this.datas.splice(index, 1);
          this.datas.length==1 && (this.datas = []);
          this.change(this.datas); 
        }else{
          jmodal.toast(data.msg);
        }
      });
    },

    /******************************** 点击 */
    //刷新
    refreshClick(load) {
      if (jtrading.isFunlvue(this.api)) return;
      this.refresh(load);
    },

    //全部
    allClick() {
      if (jtrading.isFunlvue(this.api)) return;
      
      var param = {'api':this.api, 
                   'pair':this.pair,
                   'isContract':this.isContract};
      jnavigator.open("", "trading/TradingRecord", param, {'shadowHide':true});
    },

    //撤销
    cancelClick(item, index) {
      jmodal.showLoad();
      jtrading.gtApiRsaStr(this.api, this.isContract, true, (rsa)=>{
        this.httpsCancelOrder(item, index, rsa);
      });
    }
  }
};

</script>

<style src="@/_css/style.css" ></style>

<style scoped>

.vt-order{
  flex-direction: column;
  min-height: 750px;
  margin-left: -40px;
  margin-right: -40px;
}
.order-head{
  flex-direction: row;
  justify-content: space-between;
  height: 104px;
  padding-left: 40px;
  padding-right: 40px;
}
.img-refresh{
  width: 24px;
  height: 24px;
  margin-left: 10px;
}
.img-arrow-right{
  width:12px;
  height:19px;
  margin-left: 10px;
}
.order-line{
  height:1px;
}
.order-genduo{
  justify-content: center;
  align-items: center;
  height: 100px;
}
.order-kong {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.img-kong {
  width: 264px;
  height: 204px;
  margin-bottom: 40px;
}


.order-refresh-bg{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 104px;
}

/*********************************列表*/
.order-cell{
  width: 750px;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 30px;
}
.order-cell-line{
  width:750px;
  height:2px;
}
.order-row{
  width: 750px;
  flex-direction: row;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
}
.order-column-start{
  flex: 5;
  flex-direction: column;
  align-items: flex-start;
}
.order-column-center{
  flex: 3;
  flex-direction: column;
  align-items: flex-start;
}
.order-column-end{
  flex: 3;
  flex-direction: column;
  align-items: flex-end;
}

/***************列表-类型*/
.order-type{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height:36px;
  border-radius:2px;
  padding-left: 4px;
  padding-right: 4px;
}
/***************列表-撤销*/
.order-cancel{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height:44px;
  border-radius:2px;
  border-width:2px;
  padding-left: 22px;
  padding-right: 22px;
}

/***************列表-触发*/
.order-trigger-image{
  width:28px;
  height:28px;
  margin-right: 12px;
}

/*更多*/
.order-genduo-bg{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}


/*记录-空*/


/*更多*/
.order-genduo-bg{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

</style>